<div class="page page-full bg-white animation-fade">
    <div class="page-aside">
        <div class="page-aside-switch">
            <i class="icon wb-chevron-left" aria-hidden="true"></i>
            <i class="icon wb-chevron-right" aria-hidden="true"></i>
        </div>
        <div class="page-aside-inner height-full" data-toggle="slimScroll">
            <div class="page-aside-section">
                <h5 class="page-aside-title">列表信息</h5>
                <div class="list-group has-actions top-menu" data-toggle="ListGroup" id="config_list">
                    <script id="tableConfig" type="text/html">
                        {{each data as value index}}
                        <div class="list-group-item" onclick="Page.TableConfig.selectTable('{{value.id}}');">
                            <div class="list-content">
                                <span>{{value.tableTitle}}</span>
                            </div>
                            <div class="item-actions">
                                <span class="btn btn-pure btn-icon" data-toggle="dialog"
                                      data-options={url:"${base}/admin/sys/code_generator/editTable?id={{value.id}}",onClose:Page.TableConfig.loadTableConfig}>
                                    <i  class="icon glyphicon glyphicon-edit"></i>
                                </span>
                                <span class="btn btn-pure btn-icon" data-toggle="doDel"
                                      data-options={url:"${base}/admin/sys/code_generator/delTableConfig?id={{value.id}}"}>
                                    <i class="icon glyphicon glyphicon-remove"></i>
                                </span>
                                <span class="btn btn-pure btn-icon" data-toggle="dialog" title="复制列表"
                                      data-options={url:"${base}/admin/sys/code_generator/copyTable?id={{value.id}}",onClose:Page.TableConfig.loadTableConfig}>
                                    <i class="icon glyphicon glyphicon-copy"></i>
                                </span>
                            </div>
                        </div>
                        {{/each}}
                    </script>
                </div>

            </div>
            <div class="page-aside-section hidden-xs pull-right">

                    <div class="btn-group dropup " user="group">
                        <button type="button" class="btn btn-info dropdown-toggle"   data-toggle="dropdown" aria-expanded="false">
                            <i class="fa fa-plus-square-o" aria-hidden="true"></i> 添加列表 <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu animate">
                            <li class="add-submenu after">
                                <a href="javascript:"  data-toggle="dialog"
                                   data-options="{url:'${base}/admin/sys/code_generator/editTable',onClose:Page.TableConfig.loadTableConfig}">新建列表</a>
                            </li>
                            <li class="add-submenu append" >
                                <a href="javascript:;" data-toggle="dialog"
                                   data-options="{url:'${base}/admin/sys/code_generator/openImpTable',onClose:Page.TableConfig.loadTableConfig}">导入列表</a>
                            </li>
                        </ul>
                    </div>

            </div>
        </div>
    </div>
    <div class="page-main">
        <div class="page-header">
            <h1 class="page-title">表列</h1>
            <div class="page-header-actions" id="tableHeadConfigToolBar">
                <a class="btn btn-primary" href="#" onclick="Page.TableConfig.openHeadCreate()">
                    <i class="fa fa-plus" aria-hidden="true"></i> 添加
                </a>
                <a class="btn btn-primary" href="${base}/admin/sys/code_generator/editTableHead?id={{id}}" data-toggle="edit">
                    <i class="fa fa-pencil-square-o" aria-hidden="true"></i> 编辑
                </a>
                <a class="btn btn-danger"  href="${base}/admin/sys/code_generator/delTableHead" href="#" data-toggle="del">
                    <i class="fa fa-trash-o" aria-hidden="true"></i> 删除
                </a>
            </div>
        </div>
        <div class="page-content">
            <table id="headConfigTable" >
                <thead>
                <tr>
                    <th data-options="{field:'title',width:120,align:'center'}">列名</th>
                    <th data-options="{field:'field',width:100,align:'center'}">列字段</th>
                    <th data-options="{field:'width',width:80,align:'center'}">列长度</th>
                    <th data-options="{field:'align',width:80,align:'center',type:'select',items:Page.TableConfig.align}">齐方式</th>
                    <th data-options="{field:'hidden',width:80,align:'center',type:'select',items:Page.TableConfig.hidden}">是否隐藏</th>
                    <th data-options="{field:'sortable',width:80,align:'center',type:'select',items:Page.TableConfig.sortable}">是否排序</th>
                    <th data-options="{field:'editType',width:80,align:'center',type:'select',items:Page.TableConfig.editType}">编辑类型</th>
                    <th data-options="{field:'orderRank',width:80,align:'center'}">排序号</th>
                    <th data-options="{field:'id',width:150,formatter:Page.TableConfig.operation,align:'center'}">操作</th>
                    </th>
                </tr>
                </thead>
            </table>
            <div class="site-action">

                <button type="button" class="site-action-toggle btn-raised btn btn-success btn-floating">
                    <i class="fa fa-wrench animation-scale-up" data-toggle="tooltip" data-placement="left" title="操作"></i>
                    <i class="fa fa-close animation-scale-up hidden" data-toggle="tooltip" data-placement="left" title="关闭"></i>
                </button>
                    <button type="button" id="back" class="btn-raised btn btn-success btn-floating"
                            data-toggle="tooltip" data-placement="left" title="返回">
                        <i class="fa fa-mail-reply" aria-hidden="true"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>

</div>

<script type="text/javascript">
    $.namespace('Page.TableConfig');
    Page.TableConfig = function () {
        var  currentTableId ;
        return {

            align: [{'left':'居左'},{'center':'居中'},{'right':'居右'}],
            hidden: [{'true':'隐藏'},{'false':'显示'}],
            sortable :[{'true':'是'},{'false':'否'}],
            editType : [{'':'无'},{'text':'文本'},{'data':'日期'}],

            init: function () {
                setTimeout(function() {
                    Page.TableConfig.loadTableConfig();
                    Page.TableConfig.initHeadTable();
                },600);
                $('#back').on('click', function () {
                    Bolt.navtab('switchTab', 'main')
                })
            },
            initHeadTable:function () {
                $('#headConfigTable').boltDataGrid({
                    width:'100%',
                    height:'full-220',
                    paging: false,
                    toolbar: '#tableHeadConfigToolBar',
                    dataUrl: '${base}/admin/sys/code_generator/findHeads',
                    dropOptions: {
                        drop: true,
                        afterDrop: Page.TableConfig.afterDrop,
                        position: 'before'
                    },
                    queryParams:{tableId:'none'}
                });
            },
            afterDrop:function ($descTr, $sourceTr) {
              var allData =  $('#headConfigTable').boltDataGrid('getData');
              console.log(allData)
              var orderIds = [];
              $.each(allData,function (index,value) {
                  orderIds.push(value['id']);
              })
              Bolt.ajax('doajax', {
                   url: '${base}/admin/sys/code_generator/reorder',
                   data:{'ids':orderIds.toString()}
               })
            },
            openHeadCreate:function(){
                $(this).dialog({
                    title: "列表配置",
                    url: "${base}/admin/sys/code_generator/createTableHead?tableId="+currentTableId
                });
            },
            loadTableConfig: function (v) {
                Bolt.ajax('doajax', {
                    url: '${base}/admin/sys/code_generator/dbTableList',
                    loadingmask: true,
                    okCallback: function (datas) {
                        var html = template('tableConfig', {data: datas});
                        $('#config_list').empty().html(html);
                    }
                })
            },

            selectTable:function (tableId) {
                currentTableId = tableId;
                $('#headConfigTable').boltDataGrid('refresh',{tableId:tableId});
            },
            operation:function() {
                var html =
                    '<div data-toggle="rowToolbar">'
                    + ' <a class="btn btn-info"   href="${base}/admin/sys/code_generator/editTableHead?id={{id}}"  data-toggle="edit">编辑</a>'
                    + ' <a class="btn btn-danger" href="${base}/admin/sys/code_generator/delTableHead" data-toggle="del">删除</a></div>';
                return html
            }
        }


    }();

    Bolt.addComponent({
        realName: "Page.TableConfig",
        plugin:  Page.TableConfig.init,
        runPoint: Bolt.eventType.afterAjaxPageShow
    })

</script>

